<template>
  <div class="lunbo">
      <div class="lunbo-img" @click="handleShow">
        <img class="mp-headfigure-img" :src="banners" alt="故宫">
      </div>
      <div class="lunbo-text">
        {{list}}
      </div>
      <div class="lunbo-tubiao">
        <span class="iconfont">&#xe67b;</span>
        <p>{{gallery.length}}</p>
      </div>
   <galley v-if="isShow" @handle-hide="handleFalse" :list="gallery"></galley>
  </div>
</template>

<script>
import Galley from '@/components/galley/Galley.vue'
export default {
  name: 'DetailLunbo',
  props: {
    list: String,
    banners: String,
    gallery: Array
  },
  components: {
    Galley
  },
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handleShow () {
      this.isShow = true
    },
    handleFalse () {
      this.isShow = false
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .lunbo
    position relative
  .lunbo-img
    img
      width 100%
  .lunbo-text
    margin-bottom 0.4rem
    position absolute
    bottom -0.25rem
    left 0.4rem
    z-index 1
    color white
  .lunbo-tubiao
    margin-bottom 0.4rem
    position absolute
    bottom -0.25rem
    right 0.4rem
    z-index 1
    color white
    background #000000
    opacity 0.7
    width 1.2rem
    border-radius 0.6rem
    span
      float left
      margin-left 0.4rem
    p
      float left
</style>
